<template> 
   <div class="container" >
      <div>
          <input class="form-control" :placeholder="$t('course.courseName1')" v-model="formData.courseName">
          <button class="btn"  @click="queryCourseData" title="查询"><el-icon><Search/></el-icon></button>
          <deleteCourseVue :course-list="courseList" @getSelectData="getSelectData" @reback="queryCourseData"></deleteCourseVue>  
        </div>
      <el-config-provider :locale="locale"> 
      <el-table v-if="tableData.length > 0" ref="courseTableRef" :data="tableData" :height="height" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="numbers" :label="$t('course.numbers')" width="180" />
        <el-table-column fixed prop="cover" :label="$t('course.cover')"  width="180">
            <template v-slot="scope">
                <img :src="scope.row.cover" target="_blank" class="buttonText">
            </template>
          </el-table-column>
        <el-table-column prop="courseName" :label="$t('course.courseName')" width="180" />
        <el-table-column prop="teacher" :label="$t('course.teacher')" width="180" /> 
        <el-table-column prop="remarks" :label="$t('course.remarks')" width="300" /> 
        <el-table-column prop="modtime" :label="$t('course.modtime')" width="180" />
        <el-table-column  fixed="right" :label="$t('course.operate')" width="180" >
        <template #default ="scope"> 
          <div class="box">
          <a class="btn" :title="$t('course.catalog')" @click="getCatalog"><el-icon><SetUp/></el-icon></a>
          <a class="btn" :title="$t('course.Edit')" @click="getid(scope.row)"><el-icon><Edit/></el-icon></a>
          <a class="btn" :title="$t('course.Plus')" @click="dialogForm = true" > <el-icon><Plus/></el-icon></a>
          <a class="btn" :title="$t('course.Delete')" @click="deleteCourse(scope.row)"> <el-icon><Delete/></el-icon></a>
                    </div> 
                  </template>
      </el-table-column> 
    </el-table> 
      <nav class="tr">
          <el-pagination
          v-model:current-page="formData.page"
          v-model:page-size="formData.rp"
          :page-sizes="[10, 20, 50, 100]"
          layout="sizes, prev, pager, next,total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />  
      </nav>
  </el-config-provider>
   </div>

   <el-dialog v-model="dialogForm" :title="$t('course.course1')">
    <el-form :model="formDatas">
      <el-form-item :label="$t('course.classname')" :label-width="formLabelWidth" style="width: 400px; margin-left: -77px;">
       <el-input v-model="formDatas.className" type="text" clearable></el-input>
     </el-form-item>
     <el-col :span="12" class="grid-icon">

      <el-form-item label prop="picture" class="required" >
         <el-upload :file-list="pictureFileList" :headers="pictureUploadHeaders" label-width="formLabelWidth" :data="pictureUploadData"
           list-type="picture-card" show-file-list :limit="3"> 
           <template #default><i></i></template></el-upload>
       </el-form-item>
       <el-form-item :label="$t('course.teacher1')" :label-width="formLabelWidth" class="abc">
       <el-select v-model="formDatas.classType" placeholder="Please select a zone" style="width: 260px;">
         <el-option label="李四" value="1" />
         <el-option label="张三" value="2" />
         <el-option label="王五" value="3" />
         <el-option label="刘七" value="4" />
         <el-option label="赵七" value="5" />
         <el-option label="钱七" value="6" />
         <el-option label="孙八" value="6" />
       </el-select>
     </el-form-item>
    </el-col>
    <el-form-item :label="$t('course.teacher1')"  label-width="formLabelWidth" >
           <el-radio-group v-model="radio" :label-width="formLabelWidth">
           <el-radio :label="3">{{ $t('course.class') }}</el-radio>
           <el-radio :label="6">{{ $t('course.class1') }}</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-col :span="24" class="grid-cell">
       <el-form-item :label="$t('course.course2')" prop="courseMaterials">
         <el-upload :file-list="courseMaterialsFileList" :headers="courseMaterialsUploadHeaders"
           :data="courseMaterialsUploadData" list-type="picture-card" show-file-list :limit="3"> <template
             #default><i class="el-icon-plus"></i></template></el-upload>
       </el-form-item>
     </el-col>
     <el-form-item :label="$t('course.course3')" :label-width="formLabelWidth">
       <el-input v-model="formDatas.courseIntroduction" type="text" clearable :placeholder="$t('course.courseName1')"></el-input>
     </el-form-item>
    </el-form>
    <template #footer>
     <span class="dialog-footer">
       <el-button @click="dialogForm = false">{{$t('course.cancel')}}</el-button>
       <el-button type="primary" @click="addCourse">{{$t('course.confirm')}}</el-button>
     </span>
   </template>
  </el-dialog>


   <el-dialog v-model="dialogFormVisible" :title="$t('course.course4')">
   <el-form :model="formDatas">
       <el-row></el-row>
     <el-form-item :label="$t('course.classname')" :label-width="formLabelWidth" style="width: 400px; margin-left: -77px;">
       <el-input v-model="formDatas.className" type="text" clearable></el-input>
     </el-form-item>
     
     <el-col :span="12" class="grid-icon">
       <el-form-item :label="$t('course.pictures')" prop="picture" class="required">
         <el-upload :file-list="pictureFileList" :headers="pictureUploadHeaders" label-width="formLabelWidth" :data="pictureUploadData"
           list-type="picture-card" show-file-list :limit="3"> 
           <template #default><i class="el-icon-plus"></i></template></el-upload>
       </el-form-item>
       <el-form-item :label="$t('course.teacher1')" :label-width="formLabelWidth" class="abc" style="260px">
       <el-select v-model="formDatas.classType" placeholder="Please select a zone" style="width: 260px;">
         <el-option label="李四" value="1" />
         <el-option label="张三" value="2" />
         <el-option label="王五" value="3" />
         <el-option label="刘七" value="4" />
         <el-option label="赵七" value="5" />
         <el-option label="钱七" value="6" />
         <el-option label="孙八" value="7" />
       </el-select>
     </el-form-item>
     </el-col>
       <el-form-item :label="$t('course.courseType')"  label-width="formLabelWidth" >
           <el-radio-group v-model="radio" :label-width="formLabelWidth">
           <el-radio :label="3">{{ $t('course.class') }}</el-radio>
           <el-radio :label="6">{{ $t('course.class1') }}</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-col :span="24" class="grid-cell">
       <el-form-item :label="$t('course.course2')" prop="courseMaterials">
         <el-upload :file-list="courseMaterialsFileList" :headers="courseMaterialsUploadHeaders"
           :data="courseMaterialsUploadData" list-type="picture-card" show-file-list :limit="3"> <template
             #default><i class="el-icon-plus"></i></template></el-upload>
       </el-form-item>
     </el-col>
     <el-form-item :label="$t('course.course3')"  :label-width="formLabelWidth">
       <el-input v-model="formDatas.courseIntroduction" type="text" clearable :placeholder="$t('course.courseName1')"></el-input>
     </el-form-item>
   </el-form>
   <template #footer>
     <span class="dialog-footer">
       <el-button @click="dialogFormVisible = false">{{$t('course.cancel')}}</el-button>
       <el-button type="primary" @click="revise">{{$t('course.confirm')}}</el-button>
     </span>
   </template>
 </el-dialog>
  </template>
  <script>
  import { Edit,Plus,Search,Delete,SetUp } from '@element-plus/icons-vue'
  import deleteCourseVue from '../components/DeleteCourse.vue'
  import { reactive, ref, toRefs } from 'vue'
  import { ElMessageBox } from 'element-plus'


   export default {
      name: 'APP',
      components:{
          Edit,Plus,Search,Delete,deleteCourseVue,SetUp
      },
      data: function(){ 
      return {
          height:200,
           tableData:[],
           total:20,
           formData:{
               page:1,
               rp:10,
               courseName:"",
           },
           courseList:[],
           formDatas:{
            id:"",
            className:"",
            picture:"",
            classType:"",
            radio:"",
            courseIntroduction:""

           }

      }
      },
      methods:{

       queryCourseData(){
              var that = this;
              window.http.post('/api/course/queryCourseList',this.formData).then(res => {
                 
                 var data = res.data;
                 that.tableData = data;
              }) 
              .catch(function(error){
                 that.$message.error(that.$t('course.ServerException'));
              });
              window.http.post('/api/course/queryCourseTotal',this.formData).then(res => {
                 
                 var data = res.data;
                 if(data.success){
                  that.total = data.code;
                 }
              }) 
              .catch(function(error){
                 that.$message.error(that.$t('course.ServerException'));
              })
          },
          handleSizeChange(){
              this.queryCourseData();
          },
          handleCurrentChange(){
              this.queryCourseData();
          },
          getSelectData(){
               var array = this.$refs.courseTableRef.getSelectionRows();
               this.courseList = array;
            },
          deleteCourse(row){
                this.courseList.splice(0,this.courseList.length);
                this.courseList.push(row);
                this.$bus.emit("deleteCourseById");
          },
          getCatalog(){
            this.$router.push({
                  name:"allcourse"
                  });
          },
          addCourse(){
            var that = this;
            this.dialogForm = false;
            window.http.post('/api/catalogue/addCourse',this.formDatas).then(res => {
                 var data = res.data;
                 if(data.success){
                  that.$message.success(that.$t('teacher.addsuccess'));
                 }
              }) 
              .catch(function(error){
                 that.$message.error(that.$t('course.ServerException'));
              });
          },
          getid(row){
            this.formDatas.id=row.numbers;
            this.dialogFormVisible = true;
          },
          revise(){
            var that = this;
            this.dialogFormVisible = false;
            window.http.post('/api/catalogue/revise',this.formDatas).then(res => {
                 var data = res.data;
                 if(data.success){
                  that.$message.success(that.$t('course.motifysuccess'));
                 }
              }) 
              .catch(function(error){
                 that.$message.error(that.$t('course.ServerException'));
              });
          }
      }, 
      mounted(){
          var app =document.getElementById("app");
          this.height=app.clientHeight-190;
          this.queryCourseData();
      },
      setup(){
        const radio = ref(2)
        const dialogFormVisible = ref(false)
        const dialogForm = ref(false)
        const formLabelWidth = '158px'
        const form = reactive({
          formDatas: {
          className: "",
          picture: null,
          select99359: 7,
          classType: '2',
          courseMaterials: null,
          courseIntroduction: "",
        },
        })
            return{
                ...toRefs(form),
                dialogFormVisible,
                dialogForm,
                formLabelWidth,
                radio,
     }
     }
      }
  </script>
  <style>
      html,
      body, 
      #app{
      height: 100%;
      }
  </style>
  <style scoped> 
      .container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 0px;
  
   }
   .tr{
   width: 100%;
   height: 100%;
   flex-basis: 50px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
  
   align-items: center;
   }
   .second{
   background-color: aqua;
   }
   .form-control{
      display: inline-block;
      width: 200px;
      margin-right: 10px;
   }
   .btn{
      margin-right: 5px;
  
   }
   .grid-icon{
   width: 300px;
   margin-left: 425px;
   margin-top: -53px;
  }
  .abc{
   margin-left: -503px;
   margin-top: -105px;
   display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    line-height: 32px;
    position: relative;
    font-size: var(--font-size);
    min-width: 0;
    width: 520px;
   
  }
  .box{
    margin-left: -13px;
    width: 190px !important;
    padding: 2px;
    margin-top: -2px;
  }
  .buttonText{
        width: 80px;
        height: 80px;
     }
  </style>